<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="./css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<title></title>
	</head>
	<body>

		<banner>
		</banner>
		<nav class="container">
			<p>tony老师为你讲解职场小白工作中的问题</p>
			<ul class="nav_top">
				<li>
					<figure>
						<span></span>
						<span>tony老师</span>
					</figure>
				</li>
				<li>
					<span>1378人在观看</span>
				</li>
			</ul>
			<ul class="nav_bottom">
				<li>
					<p>讲师介绍：<span>TONY老师是...</span></p>
				</li>
				<li>
					<p>讲师介绍：<span>职场小白是...</span></p>
				</li>
			</ul>
		</nav>
		<main class="container">
			<div class="main_hd">其他课程回放</div>
			<ul class="main_bd">
				<li>
					<h3>数据时代解析</h3>
					<p>在未来人工智有可能会取
						代人类的...</p>
				</li>
				<li>
					<h3>大数据时代解析</h3>
					<p>在未来人工智有可能会取
						代人类的...</p>
				</li>
			</ul>
		</main>

		<ul class="table container">
			<li>评论</li>
			<li class="current"  style="display: block;">参数</li>
		</ul>
		<div class="tab-con ">
			<div class="item container">
				<div class="tab_top">
					<div class="tab_top_left"></div>
					<div class="tab_top_center">
						<div class="tab_top_center_left">ALlYAP</div>
						<div class="tab_top_center_right">北京市</div>
					</div>
					<div class="tab_top_right">
						<div class="tab_top_right_left"></div>
						<div class="tab_top_right_right">246</div>
					</div>
				</div>
				<div class="tab_center">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启
					发，推荐大家都可以试听一些..</div>
				<div class="tab_botton">
					<div class="tab_botton_left">30分钟</div>
					<div class="tab_botton_center">回复</div>
					<div class="tab_botton_right">删除</div>
				</div>
				<div class="tab_top">
					<div class="tab_top_left"></div>
					<div class="tab_top_center">
						<div class="tab_top_center_left">ALlYAP</div>
						<div class="tab_top_center_right">北京市</div>
					</div>
					<div class="tab_top_right">
						<div class="tab_top_right_left"></div>
						<div class="tab_top_right_right">246</div>
					</div>
				</div>
				<div class="tab_center">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启
					发，推荐大家都可以试听一些..</div>
				<div class="tab_botton">
					<div class="tab_botton_left">30分钟</div>
					<div class="tab_botton_center">回复</div>
					<div class="tab_botton_right">删除</div>
				</div>
				<div class="tab_top">
					<div class="tab_top_left"></div>
					<div class="tab_top_center">
						<div class="tab_top_center_left">ALlYAP</div>
						<div class="tab_top_center_right">北京市</div>
					</div>
					<div class="tab_top_right">
						<div class="tab_top_right_left"></div>
						<div class="tab_top_right_right">246</div>
					</div>
				</div>
				<div class="tab_center">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启
					发，推荐大家都可以试听一些..</div>
				<div class="tab_botton">
					<div class="tab_botton_left">30分钟</div>
					<div class="tab_botton_center">回复</div>
					<div class="tab_botton_right">删除</div>
				</div>
				<div class="tab_top">
					<div class="tab_top_left"></div>
					<div class="tab_top_center">
						<div class="tab_top_center_left">ALlYAP</div>
						<div class="tab_top_center_right">北京市</div>
					</div>
					<div class="tab_top_right">
						<div class="tab_top_right_left"></div>
						<div class="tab_top_right_right">246</div>
					</div>
				</div>
				<div class="tab_center">课程讲的很棒，分析很到位，不愧是名师，听了真的很有启
					发，推荐大家都可以试听一些..</div>
				<div class="tab_botton">
					<div class="tab_botton_left">30分钟</div>
					<div class="tab_botton_center">回复</div>
					<div class="tab_botton_right">删除</div>
				</div>
				<footer class="container">
					<div class="footer_left">发表评论：最多不超过200个字</div>
					<ul class="footer_right">
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</footer>
			</div>
			<div class="item container"  style="display: block;">
				<h4>1～2岁英语参数对比</h4>
				<div class="img"><img src="img/kcxqc_03.png"></div>
				<ul class="item_nav">
					<li>
						<div class="item_nav_left">

						</div>
						<div class="item_nav_right">
							该课程的参数
						</div>
					</li>
					<li>
						<div class="item_nav_left1">

						</div>
						<div class="item_nav_right">
							该课程的参数
						</div>
					</li>
				</ul>
				<table  cellspacing="1px" cellpadding="1px">
					<tr>
						<td class="thh">课程参数</td>
						<td style="font-size: 0.293333rem; color: #999999;">数据完整度90%</td>
					</tr>
					<tr>
						<td class="left">价格</td>
						<td class="right">2399元</td>
					</tr>
					<tr>
						<td class="left">课程体系</td>
						<td class="right">这里是类容，这里是类容，这里是类容，这里是类容，这里是类容，这里是类容。元</td>
					</tr>
					<tr>
						<td class="left">上课时间</td>
						<td class="right">上午8:30-12:00
							下午2:00-6:00</td>
					</tr>
					<tr>
						<td class="left">退费率</td>
						<td class="right">1.05%</td>
					</tr>
					<tr>
						<td class="left">课程特点</td>
						<td class="right">这里是类容，这里是类容，这里是类容，这里是类容，这里是类容，这里是类容。</td>
					</tr>
				</table>
				<div class="footer1 container">
					<ul>
						<li>
							<a href="../首页/index.html">
								<span>&#xe751;</span>
								<span>首页</span>
							</a>
						</li>
						<li>
							<a href="../课程/index.html">
								<span>&#xe614;</span>
								<span>课程</span>
							</a>
						</li>
						<li>
							<a href="../话题和关注/index.html">
								<span>
									&#xe630;
									</svg>
								</span>
								<span>话题</span>
							</a>
						</li>
						<li>
							<a href="../我的/index.html">
								<span>&#xe600;</span>
								<span>我的</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			
		</div>
		
	</body>
</html>


<script type="text/javascript">
	//1当前有一个边框，其余不变（排他思想）修改类名的方式
	//获取元素
	var table = document.querySelector('.table');
	var lis = table.querySelectorAll('li');
	var item = document.querySelectorAll('.item');
	//for循环绑定单击事件
	for (var i = 0; i < lis.length; i++) {
		//开始给5个小li设置索引号 
		lis[i].setAttribute('index', i);
		lis[i].onclick = function() {
			//干掉所有人，其余人的lii清除，class这个类
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = '';
			}
			for (var i = 0; i < item.length; i++) {
				item[i].style.display = 'none'
			}
			//下面是显示的内容
			// 留下我自己
			var index = this.getAttribute('index');
			this.className = 'current';
			item[index].style.display = 'block'
			console.log(index);
		}

	}
	//留下我自己
</script>
